<template>
  <div @click="changeNumberNode" class="tree-node-number-card" :style="baseStyle">
    <el-tooltip class="box-item" effect="dark" content="点击返回至上一级" placement="bottom">
      <!-- <span style="cursor: pointer">{{ props.num }}</span> -->
      <span style="cursor: pointer">1</span>
    </el-tooltip>
  </div>
</template>
<script setup lang="ts">
import { inject } from "vue";
const getNode = inject<() => Node>("getNode");
const emits = defineEmits(["handleExpandNumberNode"]);
const props = defineProps({
  num: {
    type: Number
  }
});
const changeNumberNode = () => {
  const node = getNode?.();
  emits("handleExpandNumberNode", node);
};

const baseStyle = {
  width: "43px",
  height: "43px",
  color: "rgb(255, 255, 255)",
  backgroundColor: "rgb(33, 60, 141)",
  borderRadius: "50%",
  fontSize: "19px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  border: "rgb(255, 255, 255) solid 3px",
  fontWeight: "bold",
  zIndex: 10
};
</script>
